<!-- 
*   @Description:
*   @Author:lxy
*   @Date:2023-03-23 10:23
-->
<template>
  <div class="bottomPage_box">
    <h3 style="margin-bottom: 15px;font-size: 21px;">未来 7 天天气预报</h3>
    <p style="font-size: 16px; font-weight: 400;">
      <span v-if="aa">未来7天将有<span>{{ aa }}</span>天下雨，</span>
      <span v-else>未来7天将没有下雨天数降水量为0，</span>
      最高温度<span>{{ maxWendu }}</span>°(<span>{{ maxWenduData }}</span>)，
      最低温度<span>{{ minWendu }}</span>°(<span>{{ minWenduData }}</span>)
    </p>
  </div>
</template>

<script>
import {thirtyDays} from '@/api/requ'
import {convertDate} from '@/components/config/index'
export default {
  name: "bottomPage",
  mounted(){
    this.getThirtyDays()
  },
  data() {
    return {
        aa:0,   //下雨天数
        maxWendu:-9999,   //最高温度
        maxWenduData:'', //最高温度的日期
        minWendu:99999,   //最低温度
        minWenduData:''  //最低温度的日期
    };
  },
  methods:{
    getThirtyDays(){
        thirtyDays().then(res=>{
            // if(res.data.code != 200) return
            console.log("7天的days",res.data.daily)
            this.coveDataFunction(res.data.daily)
        })
    },
    coveDataFunction(data){
        data.forEach(item => {
            if(item.textDay.indexOf('雨') != -1) this.aa++
            if(item.tempMax > this.maxWendu){
                this.maxWendu = Number(item.tempMax)
                this.maxWenduData = convertDate(item.fxDate,3)
            }
            if(item.tempMin < this.minWendu){
                this.minWendu = Number(item.tempMin)
                this.minWenduData = convertDate(item.fxDate,3)
            }
        });
    }
  }
};
</script>

<style scoped lang="less">
.bottomPage_box {
  background-color: #d6dadd59;
  width: 100%;
  height: 170px;
  margin-top: 13px;
  border-radius: 10px;
  padding: 20px 15px 15px 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  p{
    &:first-child{
        margin-bottom: 15px;
    }
    &:last-child{
        text-align: center;
        line-height: 25px;
    }
  }
}
</style>
